<template>
  <view :style="style">
    <view class="empty-view" />
    <view class="login-header">
      <image
        v-if="!imageError"
        class="login-header-logo"
        :src="loginLogoUrl"
        :style="loginLogoStyle"
        mode="aspectFit"
        @error="onImageError"
      />
      <view v-else class="image-error">
        <je-icon icon="fal fa-image-slash" size="100" />
        <view>{{ $t('login.message.imageError') }}</view>
      </view>
    </view>
    <view class="login-form page-form-view">
      <uni-forms ref="form" :model="model">
        <view v-show="accountPassword">
          <uni-forms-item name="account">
            <je-input
              v-model:value="model.account"
              class="je-input-view"
              prefix-icon="fal fa-mobile-alt"
              type=" text"
              :placeholder="loginType"
            />
          </uni-forms-item>
          <uni-forms-item name="password">
            <je-input
              v-model:value="model.password"
              class="je-input-view"
              prefix-icon="fal fa-lock-alt"
              type="password"
              :placeholder="$t('login.placeholder.password')"
            />
          </uni-forms-item>
        </view>
        <view v-show="!accountPassword">
          <uni-forms-item name="phone">
            <je-input
              v-model:value="model.phone"
              class="je-input-view"
              prefix-icon="fal fa-mobile-alt"
              type="number"
              :placeholder="$t('login.placeholder.phone')"
            />
          </uni-forms-item>
          <uni-forms-item name="captcha">
            <je-input-captcha
              v-model:value="model.captcha"
              class="je-input-view"
              prefix-icon="jeicon jeicon-key"
              type="number"
              :placeholder="$t('login.placeholder.captcha')"
              @timer-click="onTimerClick"
            />
          </uni-forms-item>
        </view>

        <view class="login-form-action">
          <view v-show="accountPassword" class="link-text" @click="onSavePasswordClick">
            <je-icon
              :icon="model.savePassword ? 'fas fa-check-square' : 'fal fa-square'"
              style="margin-right: 5px"
            />
            <text>{{ $t('login.button.savePassword') }}</text>
          </view>
          <text style="flex: 1" />
          <text v-if="enableCaptchaLogin" class="link-text" @click="onDynamicPasswordClick">{{
            accountPassword
              ? $t('login.button.dynamicPassword')
              : $t('login.button.personalPassword')
          }}</text>
          <text v-if="enableFindPassword" class="link-text" @click="onForgetPasswordClick">{{
            $t('login.button.forgetPassword')
          }}</text>
        </view>
        <button
          class="login-form-submit button-view"
          type="primary"
          :loading="loading"
          @click="onLoginClick"
          >{{ $t('login.button.login') }}</button
        >
      </uni-forms>
    </view>
    <view class="login-bottom" />
  </view>
</template>
<script>
  import { useLogin } from './hooks/use-login';
  export default {
    name: 'LoginPage',
    options: { styleIsolation: 'shared' },
    setup(props, context) {
      return useLogin({
        props,
        context,
      });
    },
  };
</script>
<style lang="scss">
  @import './assets/common.scss';
  @import './assets/theme.scss';
  /* #ifdef MP-WEIXIN */
  .empty-view {
    height: calc(50px + var(--status-bar-height));
  }
  /* #endif */

  /* #ifndef MP-WEIXIN */
  .empty-view {
    height: calc(30px + var(--status-bar-height));
  }
  /* #endif */
  .image-error {
    color: $je-gray-6;
    text-align: center;
    font-size: 18px;
  }

  .login-form {
    .login-form-submit {
      margin-top: 60px;
    }
    .login-form-action {
      display: flex;
      padding: 0 10px;
      .link-text:last-child {
        margin-left: 10px;
      }
    }
  }
  .login-header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    max-height: 300px;
    .login-header-logo {
      width: 160px;
      height: 160px;
    }
  }
  .login-bottom {
    padding: 40px;
    .login-locale {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>
